*{
box-sizing: border-box;
padding: 0;
}

body{
background:linear-gradient(to right,#667db6,#0082c8,#667db6) ;
font-family: 'Ubuntu', sans-serif;
}
.container {
    width: 300px;
    background-color:#fff;
    display: block;
    margin: 0 auto;
    margin-top: 100px;
    border-radius: 10px;
    padding-bottom: 50px;
}
.app-title{
    width: 300px;
    height: 50px;
    border-radius: 10px 10px 0 0;
}

.app-title p {
    text-transform: uppercase;
    text-align: center;
    padding: 15px;
    margin: 0 auto;
    font-size: 1.6em;
    color: #293251;
}
.notification{
    background-color: #f8d7da;
    display: none; 
}
.notification p {
    color: #721c24;
    font-size: 1.2em;
    margin: 0;
    text-align: center;
    padding: 10px 0;
}

.weather-container {
    width: 300px;
    height: 260px;
    background-color: #f4f9ff; 
}
.weather-icon {
    width: 300px;
    height: 128px;

}
.weather-icon img {
    display: block;
    margin: 0 auto;

}

.temperature-value {
    width: 300px;
    height: 60px;
}

.temperature-value p{
    padding: 0;
    margin: 0;
    color: #293251;
    font-size: 4em;
    text-align: center;    
}
.temperature-value span{
    color: #293251;
    font-size: .5em;
    padding: 5px;

}
.temperature-description  {
    padding: 0;
    margin: 1em;
    color: #413f61;
    text-align: center;
    font-size: 1.2em;
   
    
}

.location p {
    margin: 0;
    padding: 0;
    color: #293251;
    text-align: center;
    font-size: .7em;
    
}

strong{
    text-transform: uppercase;
    text-align: center;
    padding: 43px;
    margin: 0 auto;
    font-size: 1.6em;
    color: #111a3c;
    
}

.options {
    text-transform: lowercase;
    text-align: center;
    margin: 0 auto;
    font-size: 1em;
    color: #1c2236;
    
    
}